<template>
    <div class="recharge">
        <el-dialog title="充值信息" :visible.sync="dialogFormVisible" width="30%" @close="handleClose">
            <el-form :model="form">
                <div class="recharge-content">
                    <el-form-item label="充值金额" :label-width="formLabelWidth">
                        <el-input v-model="form.balance" autocomplete="off" size="small">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付方式" :label-width="formLabelWidth">
                        <el-radio v-model="radio" label="1">微信</el-radio>
                        <el-radio v-model="radio" label="2">支付宝</el-radio>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="ok" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: 'Recharge',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        const validatorNumber = (rule, value, callback) => {
            let reg = /^\d+$/
        };
        return {
            radio: '1',
            dialogFormVisible: false,
            form: {
                balance: '',
            },
            formLabelWidth: '100px',

        }
    },
    computed: {
        ...mapState('userStore', ['userInfo'])
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('rechargeShow', this.recharge)
    },
    methods: {
        ...mapMutations('userStore', ['userLogin', 'updateUserInfo', 'balanceAdd']),
        handleClose() {
            // this.$emit('getNewUserInfo', this.userInfo)
        },
        recharge(value) {
            this.dialogFormVisible = value
        },
        ok() {
            const obj = {
                balance: this.form.balance
            }
            // this.balanceAdd(this.form.balance)
            this.updateUserInfo(obj)
            this.$emit('getNewUserInfo')
            this.$message({
                type: 'success',
                message: '充值成功~'
            });
            // this.$emit('balance')
            this.dialogFormVisible = false
            this.form.balance = ''
        }
    }
};
</script>
<style lang='less' scoped>
.recharge {
    width: 300px;

    .recharge-content {
        padding-right: 30px;

        .el-form-item {
            margin-bottom: 10px;

            .el-icon-view {
                font-size: 16px;
            }
        }
    }

    .dialog-footer {
        .el-button--primary {
            background-color: #11A983;
            margin-right: 30px;
        }

        .el-button--default:hover {
            color: #11a983;
            border-color: #11a983;
        }
    }
}
</style>